<template>
  <div class="table">
    <el-table
      :data="tableList"
      stripe
      style="width: 100%"
      :row-style="{ height: '30px' }"
      :cell-style="{ padding: '3.5px 0' }"
    >
      <el-table-column type="index" width="37px"></el-table-column>
      <!-- 播放 -->
      <el-table-column width="37px">
        <template v-slot="scope">
          <img src="" alt="" class="play" @click="play(scope.row.id)" />
        </template>
      </el-table-column>
      <!-- 歌曲标题 -->
      <el-table-column prop="songName" label="歌曲标题" width="236px">
        <template v-slot="scope">
          <div class="mv-a">
            <a
              href="javascript:;"
              class="songName"
              @click="toSong(scope.row.id)"
              >{{ scope.row.songName }}</a
            >
            <div
              v-if="scope.row.mv !== 0"
              class="mv"
              @click="mv(scope.row.mv)"
            ></div>
          </div>
        </template>
      </el-table-column>
      <!-- 时长 -->
      <el-table-column prop="time" label="时长" width="90px"> </el-table-column>
      <!-- 歌手 -->
      <el-table-column label="歌手" width="90px">
        <template v-slot="scope">
          <a href="javascript:;" class="singer">{{ scope.row.singer }}</a>
        </template>
      </el-table-column>
      <!-- 专辑 -->
      <el-table-column prop="al" label="专辑" width="140px" class="al">
        <template v-slot="scope">
          <a href="javascript:;" class="al">{{ scope.row.al }}</a>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getSongURL } from '@/api/api.js'
export default {
  data() {
    return {}
  },
  props: {
    tableList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    toSong(id) {
      this.$router.push({
        path: '/song',
        query: {
          id
        }
      })
    },
    // 点击mv
    mv(mv) {
      this.$router.push({
        path: '/mv',
        query: {
          id: mv
        }
      })
    },
    async play(id) {
      const { data: res } = await getSongURL(id)
      console.log(res)
      // console.log(res);
      let songList = []
      songList.push(res[0].url)
      this.$store.commit('savaSongURL', [])
      this.$store.commit('savaSongURL', songList)
    }
  }
}
</script>

<style lang="scss" scoped>
.mv-a {
  display: flex;
}
.mv {
  background: url('https://s2.music.126.net/style/web2/img/table.png?f26edb29109ebe557a4e443cf2ffb8d9');
}
.mv {
  width: 23px;
  height: 17px;
  background-position: 0 -151px;
  margin-left: 2px;
  &:hover {
    cursor: pointer;
  }
}
.songName {
  text-decoration: none;
  color: #333;
}
a:hover {
  text-decoration: underline;
}
.al,
.singer {
  text-decoration: none;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.play {
  display: block;
  width: 17px;
  height: 17px;
  background: url('https://s2.music.126.net/style/web2/img/table.png?f26edb29109ebe557a4e443cf2ffb8d9')
    no-repeat 0 9999px;
  background-position: 0 -103px;
  &:hover {
    cursor: pointer;
    background-position: 0 -128px;
  }
}
</style>
